const data = [{
        "id": 15261,
        "user_id": 190,
        "name": "阎军",
        "age": 24,
        "gender": 1,
        "hope_salary": 12000,
        "salary": 10200,
        "group": 8,
        "province": "北京",
        "city": "北京市",
        "area": "顺义区",
        "createdAt": "2023-03-03T03:15:31.000Z",
        "updatedAt": "2023-03-03T03:15:31.000Z"
    },
    {
        "id": 15260,
        "user_id": 190,
        "name": "萧明",
        "age": 26,
        "gender": 1,
        "hope_salary": 10500,
        "salary": 11400,
        "group": 7,
        "province": "福建省",
        "city": "厦门市",
        "area": "翔安区",
        "createdAt": "2023-03-03T03:15:31.000Z",
        "updatedAt": "2023-03-03T03:15:31.000Z"
    },
    {
        "id": 15259,
        "user_id": 190,
        "name": "韩秀英",
        "age": 19,
        "gender": 0,
        "hope_salary": 14800,
        "salary": 18500,
        "group": 6,
        "province": "湖南省",
        "city": "湘潭市",
        "area": "岳塘区",
        "createdAt": "2023-03-03T03:15:31.000Z",
        "updatedAt": "2023-03-03T03:15:31.000Z"
    }
]

//无数据测试用
const adata = []


// 1. 初始化渲染
let html = ``
    //根据本阶段学习的js基础知识，请封装完成一个渲染函数renderList，要求利用分支，循环，对象属性等知识
let renderList = function(a) {


    // 无数据时请使用下面这一选项
    if (!data.length) {
        document.querySelector(".list").innerHTML = `<img src='../lib/nocontent.png'>`
    }

    // 循环渲染时需要的数据结构，请将对应的数据填入
    for (let i = 0; i < a.length; i++) {
        html +=
            `<tr>
      <td>${a[i].name}</td>
      <td>${a[i].age}</td>
      <td>${a[i].gender=1?'男':'女'}</td>
      <td>第${a[i].group}组</td>
      <td>${a[i].hope_salary}</td>
      <td>${a[i].salary}</td>
      <td>${a[i].province} ${a[i].city} ${a[i].area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i data-id=${a[i].id
} class="bi bi-pen"></i></a>
        <a href="javascript:;" class="text-danger"><i data-id=${a[i].id
} class="bi bi-trash"></i></a>
      </td>
    </tr >`
    }
    // let html = ``
    // `<tr>
    //       <td>${name}</td>
    //       <td>${age}</td>
    //       <td>${性别（女生为0，男生为1）}</td>
    //       <td>第${group}组</td>
    //       <td>${hope_salary}</td>
    //       <td>${salary}</td>
    //       <td>${province} ${city} ${area}</td>
    //       <td>
    //         <a href="javascript:;" class="text-success mr-3"><i data-id=${id
    // } class="bi bi-pen"></i></a>
    //         <a href="javascript:;" class="text-danger"><i data-id=${id
    // } class="bi bi-trash"></i></a>
    //       </td>
    //     </tr >
    // `
    document.querySelector(".list").innerHTML = html;
    document.querySelector(".total").innerHTML = data.length;
}
renderList(data)
    // 当完成模版以后使用下面两行输出即可


//函数封装部分结束


// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector("#modal");
const modal = new bootstrap.Modal(modalBox);
const ps = document.querySelector("[name=province]");
const cs = document.querySelector("[name=city]");
const as = document.querySelector("[name=area]");
const initCity = async() => {
    // 显示省市区
    const { data: province } = await axios.get("/api/province");
    const phtml = province
        .map((item) => `< option value = "${item}" > ${item}</ > `)
        .join("");
    ps.innerHTML = `< option value = "" > --省份--</ > ${phtml} `;
    // 省市区联动
    ps.addEventListener("change", async() => {
        cs.value = "";
        as.value = "";
        const { data: city } = await axios.get("/api/city", {
            params: { pname: ps.value },
        });
        const chtml = city
            .map((item) => `< option value = "${item}" > ${item}</ > `)
            .join("");
        cs.innerHTML = `< option value = "" > --市--</ > ${chtml} `;
    });
    cs.addEventListener("change", async() => {
        as.value = "";
        const { data: area } = await axios.get("/api/area", {
            params: { pname: ps.value, cname: cs.value },
        });
        const ahtml = area
            .map((item) => `< option value = "${item}" > ${item}</ > `)
            .join("");
        as.innerHTML = `< option value = "" > --区--</ > ${ahtml} `;
    });
};
initCity();

// 2. 添加学生
document.querySelector("#openModal").addEventListener("click", () => {
    modalBox.querySelector("form").reset();
    modalBox.querySelector(".modal-title").innerHTML = "添加学员";
    modalBox.dataset.id = "add";
    modal.show();
});
const form = modalBox.querySelector("form");
document.querySelector("#submit").addEventListener("click", async() => {
    const data = serialize(form, { hash: true });
    //数据要进行类型转换
    data.age = +data.age;
    data.hope_salary = +data.hope_salary;
    data.salary = +data.salary;
    data.gender = +data.gender;
    data.group = +data.group;

    //根据id的关键词进行判断
    if (modalBox.dataset.id !== "add") {
        try {
            await axios.put(`/ students / ${modalBox.dataset.id} `, data);
            modal.hide();
            renderList();
        } catch (error) {
            alert("修改失败");
        }
    } else {
        try {
            await axios.post("/students", data);
            modal.hide();
            renderList();
        } catch (error) {
            alert("添加失败");
        }
    }
});

// 3. 删除学生
document.querySelector(".list").addEventListener("click", async(e) => {
    const btn = e.target;
    if (btn.classList.contains("bi-trash")) {
        // 删除
        try {
            await axios.delete(`/ students / ${btn.dataset.id} `);
            renderList();
        } catch (error) {
            alert("删除失败");
        }
    }
    if (btn.classList.contains("bi-pen")) {
        // 编辑
        const { data: student } = await axios.get(`/ students / ${btn.dataset.id} `);
        const fields = modalBox.querySelectorAll("form [name]");
        Array.from(fields).forEach(async(item) => {
            if (item.name === "gender") {
                if (+item.value === student[item.name]) item.checked = true;
            } else {
                item.value = student[item.name];
            }
        });
        const { data: city } = await axios.get("/api/city", {
            params: { pname: ps.value },
        });
        const chtml = city
            .map((item) => `< option value = "${item}" > ${item}</ > `)
            .join("");
        cs.innerHTML = `< option value = "" > --市--</ > ${chtml} `;
        cs.value = student.city;
        const { data: area } = await axios.get("/api/area", {
            params: { pname: ps.value, cname: cs.value },
        });
        const ahtml = area
            .map((item) => `< option value = "${item}" > ${item}</ > `)
            .join("");
        as.innerHTML = `< option value = "" > --区--</ > ${ahtml} `;
        as.value = student.area;

        modalBox.querySelector(".modal-title").innerHTML = "修改学员";
        // 记录ID修改使用
        modalBox.dataset.id = student.id;
        modal.show();
    }
});